<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue/vue.js"></script>
<script src="vue/axios-0.18.0.js"></script>
<link rel="stylesheet" href="css/mycss.css">
<body>

    <div id="div" style="text-align: center">
        <button @click="exportToes()">导入数据至es</button>
    <input type="text" v-model="id">
    <button @click="getGoods" >根据id获取商品信息</button>
    <div class="item-title">商品信息</div>
    <div class="item-content" >
        <p>商品ID：{{goods.id}}</p>
        <p>商品名称：{{goods.name}}</p>
        <p>商品价格：{{goods.price}}</p>
        <p>已售数量：{{goods.saleNum}}</p>
        <p>最后更新时间：{{goods.updateTime}}</p>
        <p>商品类型ID：{{goods.categoryId}}</p>
        <p>商品类型：{{goods.categoryName}}</p>
        <p>不知道：{{goods.commentNum}}</p>
        <img v-show="goods.image!=null" :src="goods.image" height="250px"  style="max-width: 20%" >
    </div>
</div>

</body>

<script>
    new Vue({
        el:"#div",
        data:{
            id:null,
            goods:""
        },
        methods:{
            getGoods(){
                axios.get("/goods/findGoodsById/"+this.id).then(res=>{
                    this.goods=res.data;
                })
            },
            exportToes(){
                axios.get('/goods/export').then(res=>{
                    alert("success")
                })
            }
        }
    })

</script>
</html>